<template>
    <div class="memberManage">
        <van-notify id="editor-notify" />
        <van-dialog id="van-dialog" />
        <div class="main">
            <van-cell-group inset class="cells">
                <xin-swipe-cell :title="User.nickName" :label="User.appId" v-for="User in UserResult" :key="User.openId"
                    :button="User.isManager ? btn[0] : btn[1]" @click="auditManager(User)">
                    <van-tag round type="success" v-if="User.isManager">
                        管理员
                    </van-tag>
                </xin-swipe-cell>
            </van-cell-group>

            <van-empty class="empty" v-if="!UserResult.length" image="search" description="这里没有用户哦" />
        </div>
        <div class="row pageControl">
            <van-button v-if="!UserResult.length" @click="UserResult.$prev()" type="primary" plain>上一页</van-button>
            <van-button v-if="!UserResult.length" @click="UserResult.$next()" type="primary" plain>下一页</van-button>
        </div>

        <van-search :value="search.value" shape="round" @change.native="updateSearchValue" @search="searchUser"
            background="#4fc08d" placeholder="请输入用户的微信名称，回车搜索" />
    </div>
</template>

<script>
import { mapState } from "vuex";
import $store from "@/store/index.js";
import Dialog from "@/wxcomponents/weapp/dist/dialog/dialog.js";
import vanSearch from "@/wxcomponents/weapp/dist/search/index";
import vanCellGroup from "@/wxcomponents/weapp/dist/cell-group/index";
import vanEmpty from "@/wxcomponents/weapp/dist/empty/index";
import vanCell from "@/wxcomponents/weapp/dist/cell/index";
import vanTag from "@/wxcomponents/weapp/dist/tag/index";
import throttle from "@/node_modules/lodash-es/throttle.js";
import Notify from "@/wxcomponents/weapp/dist/notify/notify";
export default {
    components: {
        vanSearch,
        vanCellGroup,
        vanCell,
        vanEmpty,
        vanTag,
    },
    computed: {
        ...mapState({
            UserResult: (state) => state.manager.UserResult,
        }),
    },
    data() {
        return {
            search: { value: "" },
            btn: [
                [{ name: "删除", type: "danger" }],
                [{ name: "添加", type: "primary" }],
            ],
        };
    },
    methods: {
        searchUser: throttle(function () {
            console.log("搜索", this.search.value);
            if (this.search.value.replace(/\s/g, "")) {
                Notify({
                    type: "success",
                    message: "搜索中，请稍等",
                    selector: "#editor-notify",
                });
                this.UserResult.search(this.search.value).catch((err) => {
                    console.log(err);
                    Notify({
                        type: "danger",
                        message: "搜索错误了",
                        selector: "#editor-notify",
                    });
                });
            }
        }, 1000),
        updateSearchValue({ detail }) {
            this.search.value = detail;
        },
        auditManager(User) {
            const tag = User.isManager
                ? {
                    title: "该用户已经拥有管理员权限",
                    message: "是否去除该用户管理员权限",
                }
                : {
                    title: "添加用户管理员权限",
                    message: "添加用户管理员权限",
                };
            Dialog.confirm({
                selector: "#van-dialog",
                ...tag,
            }).then(() => {
                Notify({
                    type: "success",
                    message: "更改权限中",
                    selector: "#editor-notify",
                });
                $store
                    .dispatch("ApplyManager", {
                        UserDoc: User._id,
                        isManager: !User.isManager,
                    })
                    .then(() => {
                        Notify({
                            type: "success",
                            message: "权限修改成功",
                            selector: "#editor-notify",
                        });
                    })
                    .catch((err) => {
                        console.log(err);
                        Notify({
                            type: "danger",
                            message: "权限修改错误",
                            selector: "#editor-notify",
                        });
                    });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.pageControl {
    width: 100%;
    justify-content: space-evenly;
    margin: 8rpx;
}

.memberManage {
    overflow: scroll;
    height: 100%;
    display: flex;
    flex-direction: column;

    .main {
        flex: 1;
        height: 100%;
        width: 100%;
    }

    .empty {
        height: 100%;
        width: 100%;
    }

    .cells {
        box-shadow: 0 8px 12px #ebedf0;
    }
}
</style>
